<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-05 15:16:04
 * @LastEditTime: 2019-11-06 15:50:30
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/colorpicker/js/jqColorPicker.min.js"></script>
    <style type="text/css">
        .init-full {
            display: block;
        }

        .head {
            padding-top: 25px;
        }

        .body-no-bottom {
            height: calc(100% - 65px);
        }

        .van-doc-demo-block__title {
            margin: 0;
            padding: 10px 15px 10px;
            color: rgba(69, 90, 100, 0.6);
            font-weight: normal;
            font-size: 14px;
        }

        .activityTag .van-panel__content {
            margin-left: 90px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="自定义活动" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span>预览</span>
                </div>
            </van-nav-bar>
            <van-tabs :active="activeTab">
                <van-tab title="活动设置">
                    <div class="content">
                        <div>
                            <van-cell title="活动类型" @click="showPopupMultiple = true;">
                                <div>
                                    <van-tag plain v-for="row in activityCheckedTypes" style="margin-right: 10px;">
                                        {{row.name}}</van-tag>
                                </div>
                            </van-cell>
                            <van-cell title="活动规则" @click="showPopupSelect = true;">
                                <div>{{activityRole}}</div>
                            </van-cell>
                            <van-cell title="开始时间" @click="showDatePicker = true;activityTimeIndex = 1;">
                                <div>{{activityStartTime}}</div>
                            </van-cell>
                            <van-cell title="结束时间" @click="showDatePicker = true;activityTimeIndex = 2;">
                                <div>{{activityEndTime}}</div>
                            </van-cell>
                        </div>
                        <div>
                            <van-divider :style="{ color: 'rgba(205,27,33,.3)', borderColor: 'rgba(205,27,33,.3)', padding: '0 16px' }">平台助力</van-divider>
                        </div>
                        <div></div>

                    </div>
                </van-tab>
                <van-tab title="内容设置">
                    <div class="body-no-bottom">
                        <h2 class="van-doc-demo-block__title">基础用法</h2>
                        <div class="content">
                            <van-field label="活动标题" required v-model="title" type="textarea"></van-field>
                            <van-field label="字体" required v-model="fontFamily"></van-field>
                            <van-field label="颜色" required v-model="fontColor" class="colorPicker"></van-field>
                            <van-field label="副标题" v-model="subTitle" type="textarea"></van-field>
                            <van-panel title="活动标签" class="activityTag">
                                <van-tag plain>标签</van-tag>
                                <van-tag plain type="primary">标签</van-tag>
                                <van-tag plain type="success">标签</van-tag>
                                <van-tag plain type="danger">标签</van-tag>
                                <van-tag plain type="warning">标签</van-tag>
                            </van-panel>
                            <van-radio-group value="{{ backType }}">
                                <van-radio name="backImg">背景图</van-radio>
                                <van-radio name="backColor">背景颜色</van-radio>
                            </van-radio-group>
                            <van-field label="背景颜色" v-model="bgColor" class="bgcolorPicker"></van-field>
                            <van-field label="背景图片" v-model="bgColorImg" class="bgcolorImg"></van-field>
                            <h2 class="van-doc-demo-block__title">活动产品</h2>
                            <van-card price="10.00" origin-price="20.00" desc="描述信息" title="商品标题"
                                thumb="{{ imageURL }}">
                            </van-card>
                            <h2 class="van-doc-demo-block__title">游戏</h2>
                            <h2 class="van-doc-demo-block__title">活动文案</h2>
                            <van-field label="文案说明" v-model="desc" type="textarea" autosize></van-field>
                        </div>




                        <van-loading v-if="showLoading" />
                    </div>
                </van-tab>
                <van-tab title="分享设置">分享设置</van-tab>
            </van-tabs>




        </div>

        <van-popup v-model="showPopupMultiple" position="bottom">
            <van-cell v-for="row in activityTypes" clickable @click="selectRow(row)">
                <div style="padding-left: 30px;text-align: left;">{{row.name}}</div>
                <div slot="right-icon" v-if="row.checked">
                    <van-checkbox v-model="row.checked" shape="square" slot="right-icon" />
                </div>
            </van-cell>
        </van-popup>
        <van-popup v-model="showPopupSelect" position="bottom">
            <van-picker show-toolbar :columns="activityRoles" value-key="name" @cancel="showPopupSelect = false"
                @confirm="popupSelectChange"></van-picker>
        </van-popup>
        <van-popup v-model="showDatePicker" position="bottom">
            <van-datetime-picker v-model="currentDate" cancel-button-text="清空" type="date" @cancel="clearDatePicker"
                @confirm="confirmDatePicker"></van-datetime-picker>
        </van-popup>

    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            showLoading: false,
            showPopupMultiple: false,
            showPopupSelect: false,
            showDatePicker: false,
            currentDate: new Date(),
            activeTab: 1,
            title: '',
            fontFamily: '',
            fontColor: '',
            subTitle: '',
            backType: 'backImg',
            bgcolorPicker: '',
            bgColor: '',
            bgColorImg: '',
            desc: '',
            activityTypes: [{
                name: '保养'
            }, {
                name: '洗车'
            }, {
                name: '维修'
            }, {
                name: '检测'
            }, {
                name: '救援'
            }],
            activityCheckedTypes: [],
            activityRoles: [{
                name: '买就送'
            }, {
                name: '打折'
            }, {
                name: '满减'
            }],
            activityRole: '',
            activityTimeIndex: 0,
            activityStartTime: '',
            activityEndTime: ''
        },
        created: function () {


        },
        methods: {
            //切换活动类型
            selectRow(row) {
                var that = this;
                if (typeof row.checked === 'undefined') {
                    this.$set(row, 'checked', true);
                } else {
                    row.checked = !row.checked;
                }
                that.activityCheckedTypes = that.activityTypes.filter(function (item) {
                    return item.checked;
                })
            },
            popupSelectChange(value, index) {
                var that = this;
                that.activityRole = value.name;
                that.showPopupSelect = false;
            },
            clearDatePicker() {
                var that = this;
                if (that.activityTimeIndex == 1) {
                    that.activityStartTime = '';
                } else {
                    that.activityEndTime = '';
                }
                that.showDatePicker = false;
            },
            confirmDatePicker(value) {
                var that = this;
                if (that.activityTimeIndex == 1) {
                    that.activityStartTime = FLD.getFormatDate(value).split(' ')[0];
                } else {
                    that.activityEndTime = FLD.getFormatDate(value).split(' ')[0];
                }
                that.showDatePicker = false;
            },
            onClickLeft() {

            }
        }
    })

    $(function () {
        setTimeout(function () {
            $(".colorPicker input").colorPicker();
            $(".bgcolorPicker input").colorPicker();
        }, 200);

    })

</script>

</html>